import React, { useContext } from 'react';
import { View, Dimensions, ImageBackground } from 'react-native';
import { Button, Divider, Image, ListItem, Text } from 'react-native-elements';

import LocaleContext from '../libs/locale';
import icon0 from '../assets/AboutPrivateKey/icon0.png';
import icon1 from '../assets/AboutPrivateKey/icon1.png';
import icon2 from '../assets/AboutPrivateKey/icon2.png';
import icon3 from '../assets/AboutPrivateKey/icon3.png';


const {width,height} = Dimensions.get('window');
const AboutPrivateKey = ({ navigation }: any) => {
  const locale = useContext(LocaleContext);

  return (
    <View style={{
      marginTop: 20,
      marginLeft: 20,
      marginRight: 20,
      alignItems: 'stretch',
      flex: 1,
    }}>
      <View style={{ alignItems: 'center' }}>
        <ImageBackground source={icon0} style={{ width: width*0.95, height: height*0.16,borderRadius:10 }} />
      </View>
      <Text style={{
        padding: 20,
        fontWeight: 'bold',
        fontSize: 16,
        color: '#6F47DB',
        textAlign: 'center'
      }}>{locale?._('My.security.exportPrivateKey.subtitle')}</Text>
      <Divider style={{ width: '100%' }} />
      <View>
        <ListItem>
          <ImageBackground source={icon1} style={{ width: 38, height: 38 }} />
          <ListItem.Content>
            <ListItem.Title>{locale?._('My.security.exportPrivateKey.tip1')}</ListItem.Title>
          </ListItem.Content>
        </ListItem>
        <ListItem>
          <ImageBackground source={icon2} style={{ width: 38, height: 38 }} />
          <ListItem.Content>
            <ListItem.Title>{locale?._('My.security.exportPrivateKey.tip2')}</ListItem.Title>
          </ListItem.Content>
        </ListItem>
        <ListItem>
          <ImageBackground source={icon3} style={{ width: 38, height: 38 }} />
          <ListItem.Content>
            <ListItem.Title>{locale?._('My.security.exportPrivateKey.tip3')}</ListItem.Title>
          </ListItem.Content>
        </ListItem>
      </View>
      <View style={{ alignItems: 'center', flex: 1 }} />
      <View style={{ marginBottom: 40, alignItems: 'center' }}>
        <Button
          type='outline'
          title={locale?._('ok')}
          buttonStyle={{backgroundColor:'#7367E3',width:width * 0.9}}
          titleStyle={{color:'white'}}
          onPress={() => navigation.replace('Export', { kind: 'privatekey' })}
        />
      </View>
    </View>
  );
};

export default AboutPrivateKey;
